<script lang="ts" name="person-new" setup>
import {reactive, watch} from 'vue'


//数据
let person = reactive({
  name: '张三',
  age: 24
})

function changeName () {
  person.name += '~'
}
function changeAge () {
  person.age += 1
}

function changePerson () {
  // person = {
  //   name: '李四',
  //   age: 90
  // }
  Object.assign(person, {
      name: '李四',
      age: 90
  })

  //reactive定义的对象不可以整体修改
}
//监视,情况三: 监视[reactive]定义的[对象类型数据],且默认开启深度监视
//隐式创建深度监听,是关不掉的
watch(person , (newValue, oldValue) => {
  console.log('person变化了',newValue, oldValue,',监视的是整个对象')
})
</script>

<template>
  <div class="person">
    <h1>情况三: 监视[reactive]定义的[对象类型数据]</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>